<template>
  <div>
	  <!-- 修改创意 -->
    <!-- 加载 -->
    <div class="example">
        <a-spin size="large" tip="Loading..." :spinning="spinning" />
    </div>
    <div v-if="spinning ==false">
  <a-row>
      <a-col :span="3">
        <a-anchor>
			<a-anchor-link href="#API" title="广告组">
			<a-anchor-link href="#Ad-unit" title="推广目的" />
			</a-anchor-link>
			<a-anchor-link href="#API" title="广告计划">
			<a-anchor-link href="#Ad-unit" title="所属广告组" />
			<a-anchor-link href="#Ad-Range" title="投放范围" />
			<a-anchor-link href="#Ad-target" title="投放目标" />
			<a-anchor-link href="#Ad-dstion" title="用户定向" />
			<a-anchor-link href="#Ad-Budget" title="预算与出价" />
			<a-anchor-link href="#Ad-name" title="计划名称" />
			</a-anchor-link>
			<a-anchor-link href="#API" title="广告创意">
			<a-anchor-link href="#origin-name" title="计划名称" />
			<a-anchor-link href="#origin-position" title="设置投放位置" />
			<a-anchor-link href="#origin-make" title="制作创意" />
			<a-anchor-link href="#origin-type" title="创意分类" />
			<a-anchor-link href="#origin-link" title="监测链接" />
			</a-anchor-link>
		</a-anchor>
      </a-col>
	   <a-col :span="20">
		   	<div class="code-box-demo">
				<div class="ad-row-title" id="origin-name">
					计划名称
				</div>
				<div class="ad-group ad-font-size">
						所属广告计划：
						<strong>{{datainfo.name}}（{{datainfo.id}}）</strong>
					</div>
			</div>
			<a-divider />
    	<a-form :form="form">
			<div class="code-box-demos" id="origin-position">
				<div class="ad-row-title">
					设置投放位置
				</div>
				<div class="ad-group">
					<a-form-item
						:label="$t('广告位置')"
						:labelCol="{span: 2}"
						:wrapperCol="{span: 200}"
						:required="true"
					>
						<a-radio-group v-decorator="[
                          'a',
                          { rules:[],initialValue: 'smart_inventory'}
                        ]"
						  @change="oninventory" button-style="solid">
							<a-radio-button value="smart_inventory">
								优选广告位
							</a-radio-button>
							<a-radio-button value="inventory_type">
								按媒体指定位置
							</a-radio-button>
              				<a-radio-button value="scene_inventory">
								按场景指定位置
							</a-radio-button>
						</a-radio-group>

            <p :class="[inventory =='smart_inventory'?'isblock':'isnone']" class="mfont">
              系统将根据您设置的定向，选择预估效果最好的广告位进行投放，并触达尽可能多的目标用户<span class="spanfont">了解详情</span>
            </p>
              <p :class="[inventory =='inventory_type'?'isblock':'isnone']" class="mfont">
              建议您选择所有可选广告位，否则会减少覆盖，导致广告失去部分优质展示机会
            </p>
             <p :class="[inventory =='scene_inventory'?'isblock':'isnone']" class="mfont">
              系统将结合用户使用场景，智能选择与目标用户场景契合的广告素材进行投放，并获得尽可能优的转化效果
            </p>
					</a-form-item>

          <!-- 媒体指定位置 -->
          <div :class="[inventory =='inventory_type' ? 'isblock':'isnone']" class="mfont">
            <a-table :row-selection="rowmedialist" bordered style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="medialabel" :data-source="medialist">
						</a-table>
          </div>

          <!-- 场景指定位置 -->
          <div :class="[inventory =='scene_inventory' ?'isbolck':'isnone']" class="mfont">
            <a-table :row-selection="rowscenelist" bordered style="width:500px;" selections="true" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="scenelabel" :data-source="scenelist">
						</a-table>
          </div>
				</div>
			</div>
			<a-divider />

		<div class="code-box-demos" id="origin-make">
			<div class="ad-row-title">
				制作创意
			</div>
			<div class="ad-group">
				<a-form-item
					:label="$t('创意方式')"
					:labelCol="{span: 2}"
					:wrapperCol="{span: 200}"
					:required="true"
				>
					<a-radio-group v-decorator="[
						'creative_material_mode',
						{ rules:[],initialValue: 'NONE'}
					]"
						@change="onmaterial" button-style="solid">
						<a-radio-button value="STATIC_ASSEMBLE" disabled="true">
							程序化创意
						</a-radio-button>
						<a-radio-button value="NONE" disabled="true">
							自定义创意
						</a-radio-button>
					</a-radio-group>
				</a-form-item>

				<!-- 自定义创意 -->
				<div :class="[material =='NONE' ? 'isblock' :'isnone']">
					<a-form-item
						:label="$t('创意内容')"
						:labelCol="{span: 2}"
						:wrapperCol="{span: 200}"
						:required="true"
					>
						<div class="form-row">
							已选广告位：
							<span v-if="inventory =='smart_inventory'">优选广告位</span>
							<span v-else-if="inventory =='inventory_type'" v-for="item in mediaboxlist" :key="item.key">
								{{item.name}}
							</span>
							<span v-else-if="inventory =='scene_inventory'" v-for="item in cenelistbox" :key="item.key">
								场景广告位-{{item.name}}
							</span>
						</div>
					</a-form-item>
					<p class="mfont">创意个数：<span>{{num.length}}/10</span></p>

					<!-- 遍历创意内容 -->
					<div>
						<div class="btnmonbox mfont">
							<a-badge v-for="(item,index) in paneslist" :key="index" :count="item.content.num">
							<div class="image-mode" @click="oncustom(index+1)"  :class="customactive ==index+1 ? 'mode-active':''">
								<img :src="item.img" alt="">
									{{item.title}}
								<div class="bui-icon-question-triangle" v-if="customactive ==index+1"></div>
							</div>
							</a-badge>
						</div>

						<div v-for="(item,index) in paneslist" :key="index">
							<div class="creative-common-entry" v-if="customactive ==index+1">
								<div class="creative-common-entry-1">
									<img :src="imgurl('creative_platform_entry.png')" alt="">
									<p class="creative-common-entry-1-tx-1">创意工作台</p>
									<p class="creative-common-entry-1-tx-2">您的创作</p>
									<p class="creative-common-entry-1-tx-2">制作小助手</p>
									<a href="">立即使用</a>
								</div>
								<div class="creative-common-entry-2">
									<img :src="imgurl('fast-generate-image.svg')" alt="">
									<p class="creative-common-entry-1-tx-2">一键生成大图</p>
								</div>
								<div class="creative-common-entry-2">
									<img :src="imgurl('fast-generate-video.svg')" alt="">
									<p class="creative-common-entry-1-tx-2">一键生成视频</p>
								</div>
							</div>

							<div class="ctt-panel-body-empty" v-if="customactive ==index+1 && item.content.panelshow ==true">
								<div class="creative-none-logo">
									<img :src="imgurl('none.png')" alt="">
								</div>

								<p class="panel-box" v-if="num.length <10">
									请为
									<span v-if="customactive ==index+1">
										{{item.title}}
									</span>
									<a-button type="primary" @click="addpanel(index+1)"> <a-icon type="plus" />添加创意</a-button>
								</p>
								<p class="panel-box" v-if="num.length >=10">创意总数已达上限，无法再新增创意</p>
							</div>

							<div class="ctt-panel-box" v-if="customactive == index+1 && item.content.show ==true">
								<div class="ctt-panel-header">
									<div class="tab-list" style="width:930px;max-width:930px;">
										<a-button type="primary" @click="add(index)" :disabled="tabtrue" style="margin-bottom:10px;"> <a-icon type="plus" />添加创意</a-button>
										
										<a-tabs hide-add type="editable-card" @edit="onEdit" style="min-height:600px;">
											<a-tab-pane v-for="(pane,indsub) in item.content.addpanel" :key="pane.key" :tab="pane.title" :closable="pane.closable">
												<!-- {{item.content.addpanel}} -->
													<div style="position:relative">
														<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
															<span slot="label">
																创意内容&nbsp;
																<!-- <a-tooltip title="What do you want others to call you?">
																<a-icon type="question-circle-o" />
																</a-tooltip> -->
															</span>
															<div class="form-row">
																<div class="creative-video-card">
																	<!-- 如果为竖版视频 -->
																	<div v-if="customactive == 1">
																		<div class="creative-video-card-wrapper">
																			<div class="video-card">

																				<div class="card-create-md" style="padding:0;" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																					<div class="videomodel" v-if="pane.videoUrl" >
																						<div class="videobtn" >
																							<a-button size="small" @click="onvideo(indsub)" :loading="btnloading" type="primary">更换视频</a-button>
																							<a :href="pane.videoUrl" target="_blank"><a-button size="small" @click="pane.videoUrl">视频播放</a-button></a>
																						</div>
																						<video
																						ref="refVideo"
																						width="140"
																						height="250"
																						playsinline="true"
																						type="video/mp4"
																						controls
																						muted
																						:src="pane.videoUrl" />
																					</div>
																					
																					<div v-else style="padding:16px;">
																						<a-upload
																						name="avatar"
																						list-type="picture-card"
																						class="avatar-uploader "
																						:show-upload-list="false"
																						:data="{index:indsub,sub:customactive,uptype:1}"
																						:customRequest="customRequest"
																						@change="videoChange(indsub,$event)">

																						<img v-if="pane.videoUrl" :src="pane.videoUrl" alt="avatar" />
																						<div v-else>
																							<a-icon :type="pane.uploadloading ? 'loading' :'cloud-upload'" />
																							<div class="ant-upload-text">
																								<p style="font-size:12px;">（必填）</p>
																								<p>上传视频</p>
																							</div>
																						</div>
																						</a-upload>
																						<div class="card-create-button">
																							<a-button @click="onvideo(indsub)" :loading="btnloading">素材库</a-button>
																						</div>
																					</div>
																				</div>
																				
																				<p class="card-create-mdp" :style="{width:item.content.width+'px'}">宽高比9:16,视频码率≥516kbps,大小≤100M,分辨率≥720*1280,时长≥4s</p>
																			</div>
																		</div>
																		<!-- 竖图视频弹窗 -->
																		<a-modal
																			title=""
																			:visible="pane.videoshow"
																			:confirm-loading="confirmLoading"
																			@ok="videook(indsub)"
																			@cancel="handlevideo(indsub)"
																			:width="900"
																			>
																			<div class="material">
																				<a-tabs default-active-key="1" @change="callback">
																					<a-tab-pane key="1" tab="我的视频">
																						<a-form :form="forms">
																						<a-space>
																							<!-- 我的视频 -->
																							<a-input-search
																							style="width:200px;"
																							placeholder="可搜索视频名称或ID"
																							enter-button="搜索"
																							@search="sourceserach"
																							/>

																							<a-select name="source" style="width: 120px" placeholder="全部来源" @change="onallsource">
																								<a-select-option value="AD_SITE">
																									本地上传
																								</a-select-option>
																								<a-select-option value="CREATIVE_CENTER">
																									创意中心
																								</a-select-option>
																								<a-select-option value="OPEN_API">
																									开放平台
																								</a-select-option>
																								<a-select-option value="SUPPLIER">
																									即合视频
																								</a-select-option>
																								<a-select-option value="VIDEO_CAPTURE">
																									易拍视频
																								</a-select-option>
																								<a-select-option value="ACCOUNT_PUSH">
																									推送视频
																								</a-select-option>
																								<a-select-option value="STAR">
																									星图视频
																								</a-select-option>
																								<a-select-option value="CEWEBRITY_VIDEO">
																									达人视频
																								</a-select-option>
																								<a-select-option value="OTHERS">
																									其他来源
																								</a-select-option>
																							</a-select>
																							<a-select style="width: 120px" placeholder="全部标签" @change="onlabel">
																								
																							</a-select>
																						</a-space>
																						<div style="margin-top:12px;height:430px;overflow:auto;">
																							<a-list :grid="{ gutter: 16, column: 4 }" :data-source="pane.videolist">
																								<a-list-item slot="renderItem" @click="onvideoactive(indsub,item)" style="cursor:pointer;" :class="[pane.videoactive ==item ? 'videoactive' :'']"  slot-scope="item">
																									<video
																									ref="refVideo"
																									width="200"
																									height="300"
																									playsinline="true"
																									type="video/mp4"
																									controls
																									muted
																									:src="item.url" />
																									<p>
																										<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																										<span class="videoname">{{item.filename}}</span> <a href="">编辑</a></p>
																										<div class="activetrue" v-if="pane.videoactive ==item">
																											<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																										</div>
																								</a-list-item>
																							</a-list>
																						</div>
																					<p>已选择 {{pane.videonum}}/1:</p>
																					</a-form>
																					</a-tab-pane>
																					<a-tab-pane key="2" tab="本地上传" force-render>
																							<a-upload-dragger
																								name="file"
																								:disabled="pane.videonum ==1"
																								:multiple="true"
																								:data="{index:indsub,sub:customactive,uptype:1}"
																								@change="videoChange(indsub,$event)"
																								:customRequest="modecustomRequest"
																							>
																							<div v-if="pane.videonum ==1">
																								<p>已达视频上传上限{{pane.videonum}}</p>
																							</div>
																							<div v-else>
																								<p class="ant-upload-drag-icon">
																								<a-icon :type="pane.uploadloading ?'loading' : 'cloud-upload'" />
																								</p>
																								<p class="ant-upload-text">
																									将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																								</p>
																								<p class="ant-upload-hint">
																									宽高比9:16,视频码率≥516kbps,大小≤100M,分辨率≥720*1280,时长≥4s
																								</p>
																							</div>
																							</a-upload-dragger>
																						<p>已选择：{{pane.videonum}}/1</p>
																						
																					</a-tab-pane>
																					</a-tabs>
																			</div>
																		</a-modal>

																		<div class="creative-video-card-wrapper">
																			<div class="video-card">
																				<div class="card-create-md" style="padding:0;" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																					<div class="videomodel" v-if="pane.imageUrl" >
																						<div class="videobtn" style="top:95px;">
																							<a-button size="small" @click="onvideocover(indsub)" :loading="btnloading" type="primary">更换图片</a-button>
																						</div>
																						<img :src="pane.imageUrl" style="width:100%;height:250px" alt="">
																					</div>
																					<div v-else style="padding:16px;">
																						<a-upload
																						v-decorator="[
																						'upload',
																						
																						]"
																						name="avatar"
																						list-type="picture-card"
																						class="avatar-uploader"
																						:show-upload-list="false"
																						:data="{index:indsub,sub:customactive,uptype:2}"
																						:customRequest="customRequest"
																						@change="coverChange(indsub,$event)">

																						<img v-if="pane.imageUrl" :src="pane.imageUrl" alt="avatar" />
																						<div v-else>
																							<a-icon :type="pane.imgloading ?'loading' : 'cloud-upload'" />
																							<div class="ant-upload-text">
																								<p style="font-size:12px;">（必填）</p>
																								<p>上传封面</p>
																							</div>
																						</div>
																						</a-upload>
																						<div class="card-create-button">
																							<a-button @click="onvideocover(indsub)" :loading="btnloading">生成/选择封面</a-button>
																						</div>
																					</div>
																						
																				</div>
																				<p class="card-create-mdp" :style="{width:item.content.width+'px'}">建议最佳：宽高比9:16,720*1280≤尺寸≤1440*2560,支持JPG、PNG等图片格式</p>
																			</div>
																		</div>

																		<!-- 封面图弹窗 -->
																		<a-modal
																			title=""
																			:visible="pane.covershow"
																			:confirm-loading="confirmLoading"
																			@ok="videocoverok(indsub)"
																			@cancel="handlecover(indsub)"
																			:width="900"
																			>
																			<div class="material">
																				<a-tabs default-active-key="1" @change="callback">
																					<a-tab-pane key="1" tab="图片素材">
																						<div style="margin-top:12px;height:430px;overflow:auto;">
																							<a-list :grid="{ gutter: 16, column: 4 }" :data-source="pane.coverlist">
																								<a-list-item slot="renderItem" @click="onvideocoveractive(indsub,item)" style="cursor:pointer;" :class="[pane.coveractive ==item ? 'coveractive' :'']"  slot-scope="item">
																									<img :src="item.url" :class="[pane.coveractive ==item ? 'imgactive' :'']" style="height:290px;" alt="">
																									<!-- <p> -->
																										<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																									
																										<div class="activetrues" v-if="pane.coveractive ==item">
																											<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																										</div>
																								</a-list-item>
																							</a-list>
																						</div>
																						<p>已选择 {{pane.covernum}}/1:</p>
																					</a-tab-pane>
																					<a-tab-pane key="2" tab="本地上传">
																						<a-upload-dragger
																								name="file"
																								:disabled="pane.covernum ==1"
																								:multiple="true"
																								:data="{index:indsub,sub:customactive,uptype:2}"
																								@change="coverChange(indsub,$event)"
																								:customRequest="modecustomRequest"
																							>
																							<div v-if="pane.covernum ==1">
																								<p>已达封面图上传上限{{pane.covernum}}</p>
																							</div>
																							<div v-else>
																								<p class="ant-upload-drag-icon">
																								<a-icon :type="pane.imgloading ?'loading' : 'cloud-upload'" />
																								</p>
																								<p class="ant-upload-text">
																									将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																								</p>
																								<p class="ant-upload-hint">
																									建议最佳：宽高比9:16，720*1280≤尺寸≤1440*2560，支持JPG、PNG等图片格式
																								</p>
																							</div>
																						</a-upload-dragger>
																					</a-tab-pane>
																				</a-tabs>
																			</div>
																		</a-modal>
																	</div>
																	<!-- 横板视频 -->
																	<div v-else-if="customactive == 2">
																		<div class="creative-video-card-wrapper">
																			<div class="video-card">

																				<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																					<div class="videomodel" v-if="pane.videoUrl" >
																						<div class="videobtn" >
																							<a-button size="small" @click="onvideo(indsub)" :loading="btnloading" type="primary">更换视频</a-button>
																							<a :href="pane.videoUrl" target="_blank"><a-button size="small" @click="pane.videoUrl">视频播放</a-button></a>
																						</div>
																						<video
																						ref="refVideo"
																						width="250"
																						height="140"
																						playsinline="true"
																						type="video/mp4"
																						controls
																						muted
																						:src="pane.videoUrl" />
																					</div>
																					
																					<div v-else style="padding:12px;">
																						<a-upload
																						name="avatar"

																						:show-upload-list="false"
																						:data="{index:indsub,sub:customactive,uptype:1}"
																						:customRequest="customRequest"
																						@change="videoChange(indsub,$event)">

																						<img v-if="pane.videoUrl" :src="pane.videoUrl" alt="avatar" />
																						<div v-else style="width:224px;height:68px;background-color: #F8F8F8;border: 1px dashed #D6D6D6;text-align:center;sursor:pointer;">
																							<a-icon :type="pane.uploadloading ?'loading' : 'cloud-upload'" />
																							<div class="ant-upload-text">
																								<p style="font-size:12px;">（必填）</p>
																								<p>上传视频</p>
																							</div>
																						</div>
																						</a-upload>
																						<div class="card-create-button" style="text-align:center;">
																							<a-button @click="onvideo(indsub)" :loading="btnloading">素材库</a-button>
																						</div>
																					</div>
																				</div>
																				
																				<p class="card-create-mdp" :style="{width:item.content.width+'px'}">宽高比16:9,视频码率≥516kbps,大小≤1000M,分辨率≥1280*720,时长≥4s</p>
																			</div>
																		</div>
																		<!-- 竖图视频弹窗 -->
																		<a-modal
																			title=""
																			:visible="pane.videoshow"
																			:confirm-loading="confirmLoading"
																			@ok="videook(indsub)"
																			@cancel="handlevideo(indsub)"
																			:width="900"
																			>
																			<div class="material">
																				<a-tabs default-active-key="1" @change="callback">
																					<a-tab-pane key="1" tab="我的视频">
																						<a-form :form="forms">
																						<a-space>
																							<!-- 我的视频 -->
																							<a-input-search
																							style="width:200px;"
																							placeholder="可搜索视频名称或ID"
																							enter-button="搜索"
																							@search="sourceserach"
																							/>

																							<a-select name="source" style="width: 120px" placeholder="全部来源" @change="onallsource">
																								<a-select-option value="AD_SITE">
																									本地上传
																								</a-select-option>
																								<a-select-option value="CREATIVE_CENTER">
																									创意中心
																								</a-select-option>
																								<a-select-option value="OPEN_API">
																									开放平台
																								</a-select-option>
																								<a-select-option value="SUPPLIER">
																									即合视频
																								</a-select-option>
																								<a-select-option value="VIDEO_CAPTURE">
																									易拍视频
																								</a-select-option>
																								<a-select-option value="ACCOUNT_PUSH">
																									推送视频
																								</a-select-option>
																								<a-select-option value="STAR">
																									星图视频
																								</a-select-option>
																								<a-select-option value="CEWEBRITY_VIDEO">
																									达人视频
																								</a-select-option>
																								<a-select-option value="OTHERS">
																									其他来源
																								</a-select-option>
																							</a-select>
																							<a-select style="width: 120px" placeholder="全部标签" @change="onlabel">
																								
																							</a-select>
																						</a-space>
																						<div style="margin-top:12px;height:430px;overflow:auto;">
																							<a-list :grid="{ gutter: 16, column: 4 }" :data-source="pane.videolist">
																								<a-list-item slot="renderItem" @click="onvideoactive(indsub,item)" style="cursor:pointer;" :class="[pane.videoactive ==item ? 'videoactive' :'']"  slot-scope="item">
																									<video
																									ref="refVideo"
																									width="200"
																									height="300"
																									playsinline="true"
																									type="video/mp4"
																									controls
																									muted
																									:src="item.url" />
																									<p>
																										<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																										<span class="videoname">{{item.filename}}</span> <a href="">编辑</a></p>
																										<div class="activetrue" v-if="pane.videoactive ==item">
																											<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																										</div>
																								</a-list-item>
																							</a-list>
																						</div>
																					<p>已选择 {{pane.videonum}}/1:</p>
																					</a-form>
																					</a-tab-pane>
																					<a-tab-pane key="2" tab="本地上传" force-render>
																							<a-upload-dragger
																								name="file"
																								:disabled="pane.videonum ==1"
																								:multiple="true"
																								:data="{index:indsub,sub:customactive,uptype:2}"
																								:customRequest="modecustomRequest"
																								@change="videoChange(indsub,$event)"
																							>
																							<div v-if="pane.videonum ==1">
																								<p>已达视频上传上限{{pane.videonum}}</p>
																							</div>
																							<div v-else>
																								<p class="ant-upload-drag-icon">
																								<a-icon :type="pane.uploadloading ?'loading' : 'cloud-upload'" />
																								</p>
																								<p class="ant-upload-text">
																									将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																								</p>
																								<p class="ant-upload-hint">
																									宽高比16:9,视频码率≥516kbps,大小≤1000M,分辨率≥1280*720,时长≥4s
																								</p>
																							</div>
																							</a-upload-dragger>
																						<p>已选择：{{pane.videonum}}/1</p>
																						
																					</a-tab-pane>
																					</a-tabs>
																			</div>
																		</a-modal>

																		<div class="creative-video-card-wrapper">
																			<div class="video-card">
																				<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																					<div class="videomodel" v-if="pane.imageUrl" >
																						<div class="videobtn" style="top:95px;">
																							<a-button size="small" @click="oncover(indsub)" :loading="btnloading" type="primary">更换图片</a-button>
																						</div>
																						<img :src="pane.imageUrl" style="width:100%;height:140px" alt="">
																					</div>
																					<div v-else style="padding:12px;">
																						<a-upload
																						v-decorator="[
																						'upload',
																						
																						]"
																						name="avatar"
																						:show-upload-list="false"
																						:data="{index:indsub,sub:customactive,uptype:2}"
																						:customRequest="customRequest"
																						@change="coverChange(indsub,$event)">

																						<img v-if="pane.imageUrl" :src="pane.imageUrl" style="width:100%;height:140px" alt="avatar" />
																						<div v-else style="width:224px;height:68px;background-color: #F8F8F8;border: 1px dashed #D6D6D6;text-align:center;sursor:pointer;">
																							<a-icon :type="pane.imgloading ?'loading' : 'cloud-upload'" />
																							<div class="ant-upload-text">
																								<p style="font-size:12px;">（必填）</p>
																								<p>上传封面</p>
																							</div>
																						</div>
																						</a-upload>
																						<div class="card-create-button" style="text-align:center">
																							<a-button @click="oncover(indsub)" :loading="btnloading">生成/选择封面</a-button>
																						</div>
																					</div>
																						
																				</div>
																				<p class="card-create-mdp" :style="{width:item.content.width+'px'}">建议最佳：宽高比16:9,1280*720≤尺寸≤2560*1440,支持JPG、PNG等图片格式</p>
																			</div>
																		</div>

																		<!-- 封面图弹窗 -->
																		<a-modal
																			title=""
																			:visible="pane.covershow"
																			:confirm-loading="confirmLoading"
																			@ok="coverok(indsub)"
																			@cancel="handlecover(indsub)"
																			:width="900"
																			>
																			<div class="material">
																				<a-tabs default-active-key="1" @change="callback">
																					<a-tab-pane key="1" tab="图片素材">
																						<div style="margin-top:12px;height:430px;overflow:auto;">
																							<a-list :grid="{ gutter: 16, column: 3 }" :data-source="pane.coverlist">
																								<a-list-item slot="renderItem" @click="oncoveractive(indsub,item)" style="cursor:pointer;" :class="[pane.coveractive ==item ? 'coveractive' :'']"  slot-scope="item">
																									<img :src="item.url" :class="[pane.coveractive ==item ? 'imgactive' :'']" style="width:100%;height:290px;" alt="">
																									<!-- <p> -->
																										<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																									
																										<div class="activetrues" v-if="pane.coveractive ==item">
																											<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																										</div>
																								</a-list-item>
																							</a-list>
																						</div>
																						<p>已选择 {{pane.covernum}}/1:</p>
																					</a-tab-pane>
																					<a-tab-pane key="2" tab="本地上传">
																						<a-upload-dragger
																								name="file"
																								:disabled="pane.covernum ==1"
																								:multiple="true"
																								:data="{index:indsub,sub:customactive,uptype:2}"
																								:customRequest="modecustomRequest"
																								@change="coverChange(indsub,$event)"
																							>
																							<div v-if="pane.covernum ==1">
																								<p>已达封面图上传上限{{pane.covernum}}</p>
																							</div>
																							<div v-else>
																								<p class="ant-upload-drag-icon">
																								<a-icon :type="pane.imgloading ? 'loading' :'cloud-upload'" />
																								</p>
																								<p class="ant-upload-text">
																									将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																								</p>
																								<p class="ant-upload-hint">
																									建议最佳：宽高比16:9，1280*720≤尺寸≤2560*1440，支持JPG、PNG等图片格式
																								</p>
																							</div>
																						</a-upload-dragger>
																					</a-tab-pane>
																				</a-tabs>
																			</div>
																		</a-modal>
																	</div>
																	<!-- 大图横图 -->
																	<div v-else-if="customactive == 3">
																		<div class="creative-video-card-wrapper">
																			<div class="video-card">
																				<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																					<div class="videomodel" v-if="pane.imageUrl" >
																						<div class="videobtn" style="top:50px;left:90px;">
																							<a-button size="small" @click="oncover(indsub)" :loading="btnloading" type="primary">更换图片</a-button>
																						</div>
																						<img :src="pane.imageUrl" style="width:100%;height:140px" alt="">
																					</div>
																					<div v-else style="padding:12px;">
																						<a-upload
																						v-decorator="[
																						'upload',
																						
																						]"
																						name="avatar"
																						:show-upload-list="false"
																						:data="{index:indsub,sub:customactive,uptype:2}"
																						:customRequest="customRequest"
																						@change="coverChange(indsub,$event)">

																						<img v-if="pane.imageUrl" :src="pane.imageUrl" style="width:100%;height:140px" alt="avatar" />
																						<div v-else style="width:224px;height:68px;background-color: #F8F8F8;border: 1px dashed #D6D6D6;text-align:center;">
																							<a-icon :type="pane.imgloading ?'loading' :'cloud-upload'" />
																							<div class="ant-upload-text">
																								<p style="font-size:12px;">（必填）</p>
																								<p>上传图片</p>
																							</div>
																						</div>
																						</a-upload>
																						<div class="card-create-button" style="text-align:center">
																							<a-button @click="oncover(indsub)" :loading="btnloading">素材库</a-button>
																						</div>
																					</div>
																						
																				</div>
																				<p class="card-create-mdp" :style="{width:item.content.width+'px'}">建议最佳：宽高比16:9,1280*720≤尺寸≤2560*1440,支持JPG、PNG等图片格式</p>
																			</div>
																		</div>

																		<!-- 封面图弹窗 -->
																		<a-modal
																			title=""
																			:visible="pane.covershow"
																			:confirm-loading="confirmLoading"
																			@ok="coverok(indsub)"
																			@cancel="handlecover(indsub)"
																			:width="900"
																			>
																			<div class="material">
																				<a-tabs default-active-key="1" @change="callback">
																					<a-tab-pane key="1" tab="图片素材">
																						<div style="margin-top:12px;height:430px;overflow:auto;">
																							<a-list :grid="{ gutter: 16, column: 4 }" :data-source="pane.coverlist">
																								<a-list-item slot="renderItem" @click="oncoveractive(indsub,item)" style="cursor:pointer;" :class="[pane.coveractive ==item ? 'coveractive' :'']"  slot-scope="item">
																									<img :src="item.url" :class="[pane.coveractive ==item ? 'imgactive' :'']" style="width:100%;height:290px;" alt="">
																									<!-- <p> -->
																										<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																									
																										<div class="activetrues" v-if="pane.coveractive ==item">
																											<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																										</div>
																								</a-list-item>
																							</a-list>
																						</div>
																						<p>已选择 {{pane.covernum}}/1:</p>
																					</a-tab-pane>
																					<a-tab-pane key="2" tab="本地上传">
																						<a-upload-dragger
																								name="file"
																								:disabled="pane.covernum ==1"
																								:multiple="true"
																								:data="{index:indsub,sub:customactive,uptype:2}"
																								:customRequest="modecustomRequest"
																								@change="coverChange(indsub,$event)"
																							>
																							<div v-if="pane.covernum ==1">
																								<p>已达封面图上传上限{{pane.covernum}}</p>
																							</div>
																							<div v-else>
																								<p class="ant-upload-drag-icon">
																								<a-icon :type="pane.imgloading ?'loading' : 'cloud-upload'" />
																								</p>
																								<p class="ant-upload-text">
																									将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																								</p>
																								<p class="ant-upload-hint">
																									建议最佳：宽高比16:9，1280*720≤尺寸≤2560*1440，支持JPG、PNG等图片格式
																								</p>
																							</div>
																						</a-upload-dragger>
																					</a-tab-pane>
																				</a-tabs>
																			</div>
																		</a-modal>
																	</div>
																	<!-- 组图 -->
																	<div v-else-if="customactive == 4">
																		
																		<div class="creative-video-card-wrapper" v-for="(iv,nv) in pane.group" :key="nv" style="margin-right:5px;">
																			<div class="video-card">
																				<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																					<div class="videomodel" v-if="iv.img" >
																						<div class="videobtn" style="top:95px;">
																							<a-button size="small" @click="oncoverGroup(indsub,nv)" :loading="btnloading" type="primary">更换图片</a-button>
																						</div>
																						<img :src="iv.img" style="width:100%;height:140px" alt="">
																					</div>
																					<div v-else style="padding:12px;">
																						<a-upload
																						v-decorator="[
																						'upload',
																						
																						]"
																						name="avatar"
																						:show-upload-list="false"
																						:data="{index:indsub,sub:customactive,uptype:2,group:nv}"
																						:customRequest="customRequest"
																						@change="covergroupChange(indsub,nv,$event)">

																						<img v-if="iv.img" :src="iv.img" style="width:100%;height:140px" alt="avatar" />
																						<div v-else style="width:152px;height:45px;background-color: #F8F8F8;border: 1px dashed #D6D6D6;text-align:center;">
																							<a-icon :type="iv.imgloading ? 'loading' :'cloud-upload'" />
																							<div class="ant-upload-text">
																								<p>上传图片（必填）</p>
																							</div>
																						</div>
																						</a-upload>
																						<div class="card-create-button" style="text-align:center">
																							<a-button @click="oncoverGroup(indsub,nv)" :loading="btnloading">素材库</a-button>
																						</div>
																					</div>
																						
																				</div>
																				<!-- <p class="card-create-mdp">建议最佳：宽高比1.52,456*300≤尺寸≤1368*900,支持JPG、PNG等图片格式</p> -->
																			</div>
																		</div>

																		<p class="card-create-mdp mfont">建议最佳：宽高比1.52,456*300≤尺寸≤1368*900,支持JPG、PNG等图片格式</p>
																		
																		<!-- 封面图弹窗 -->
																		<a-modal
																		v-for="(iv,nv) in pane.group" :key="nv"
																			title=""
																			:visible="iv.showis"
																			:confirm-loading="confirmLoading"
																			@ok="coverokGroup(indsub,nv)"
																			@cancel="handlecoverGroup(indsub,nv)"
																			:width="900"
																			>
																			<div class="material">
																				<a-tabs default-active-key="1" @change="callback">
																					<a-tab-pane key="1" tab="图片素材">
																						<div style="margin-top:12px;height:430px;overflow:auto;">
																							<a-list :grid="{ gutter: 16, column: 4 }" :data-source="pane.coverlist">
																								<a-list-item slot="renderItem" @click="oncoveractiveGroup(indsub,item,nv)" style="cursor:pointer;" :class="[iv.activeimg ==item ? 'coveractive' :'']"  slot-scope="item">
																									<img :src="item.url" :class="[iv.activeimg ==item ? 'imgactive' :'']" style="width:100%;height:290px;" alt="">
																									<!-- <p> -->
																										<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																									
																										<div class="activetrues" v-if="iv.activeimg ==item">
																											<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																										</div>
																								</a-list-item>
																							</a-list>
																						</div>
																						<p>已选择 {{iv.nums}}/1:</p>
																					</a-tab-pane>
																					<a-tab-pane key="2" tab="本地上传">
																						<a-upload-dragger
																								name="file"
																								:disabled="iv.nums ==1"
																								:multiple="true"
																								:data="{index:indsub,sub:customactive,uptype:2,group:nv}"
																								:customRequest="modecustomRequest"
																								@change="covergroupChange(indsub,nv,$event)"
																							>
																							<div v-if="iv.nums ==1">
																								<p>已达封面图上传上限</p>
																							</div>
																							<div v-else>
																								<p class="ant-upload-drag-icon">
																								<a-icon :type="iv.imgloading ?'loading' :'cloud-upload'" />
																								</p>
																								<p class="ant-upload-text">
																									将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																								</p>
																								<p class="ant-upload-hint">
																									建议最佳：宽高比16:9，1280*720≤尺寸≤2560*1440，支持JPG、PNG等图片格式
																								</p>
																							</div>
																						</a-upload-dragger>
																					</a-tab-pane>
																				</a-tabs>
																			</div>
																		</a-modal>
																	</div>
																	<!-- 小图 -->
																	<div v-else-if="customactive == 5">
																		<div class="creative-video-card-wrapper">
																			<div class="video-card">
																				<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																					<div class="videomodel" v-if="pane.imageUrl" >
																						<div class="videobtn" style="top:95px;">
																							<a-button size="small" @click="oncover(indsub)" :loading="btnloading" type="primary">更换图片</a-button>
																						</div>
																						<img :src="pane.imageUrl" style="width:100%;height:140px" alt="">
																					</div>
																					<div v-else style="padding:12px;">
																						<a-upload
																						v-decorator="[
																						'upload',
																						
																						]"
																						name="avatar"
																						:show-upload-list="false"
																						:data="{index:indsub,sub:customactive,uptype:2}"
																						:customRequest="customRequest"
																						@change="coverChange(indsub,$event)">

																						<img v-if="pane.imageUrl" :src="pane.imageUrl" style="width:100%;height:140px" alt="avatar" />
																						<div v-else style="width:206px;height:68px;background-color: #F8F8F8;border: 1px dashed #D6D6D6;text-align:center;">
																							<a-icon :type="pane.imgloading ?'loading' :'cloud-upload'" />
																							<div class="ant-upload-text">
																								<p style="font-size:12px;">（必填）</p>
																								<p>上传图片</p>
																							</div>
																						</div>
																						</a-upload>
																						<div class="card-create-button" style="text-align:center">
																							<a-button @click="oncover(indsub)" :loading="btnloading">素材库</a-button>
																						</div>
																					</div>
																						
																				</div>
																				<p class="card-create-mdp" :style="{width:item.content.width+'px'}">建议最佳：宽高比1.52,456*300≤尺寸≤1368*900,支持JPG、PNG等图片格式</p>
																			</div>
																		</div>

																		<!-- 封面图弹窗 -->
																		<a-modal
																			title=""
																			:visible="pane.covershow"
																			:confirm-loading="confirmLoading"
																			@ok="coverok(indsub)"
																			@cancel="handlecover(indsub)"
																			:width="900"
																			>
																			<div class="material">
																				<a-tabs default-active-key="1" @change="callback">
																					<a-tab-pane key="1" tab="图片素材">
																						<div style="margin-top:12px;height:430px;overflow:auto;">
																							<a-list :grid="{ gutter: 16, column: 4 }" :data-source="pane.coverlist">
																								<a-list-item slot="renderItem" @click="oncoveractive(indsub,item)" style="cursor:pointer;" :class="[pane.coveractive ==item ? 'coveractive' :'']"  slot-scope="item">
																									<img :src="item.url" :class="[pane.coveractive ==item ? 'imgactive' :'']" style="width:100%;height:290px;" alt="">
																									<!-- <p> -->
																										<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																									
																										<div class="activetrues" v-if="pane.coveractive ==item">
																											<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																										</div>
																								</a-list-item>
																							</a-list>
																						</div>
																						<p>已选择 {{pane.covernum}}/1:</p>
																					</a-tab-pane>
																					<a-tab-pane key="2" tab="本地上传">
																						<a-upload-dragger
																								name="file"
																								:disabled="pane.covernum ==1"
																								:multiple="true"
																								:data="{index:indsub,sub:customactive,uptype:2}"
																								:customRequest="modecustomRequest"
																								@change="coverChange(indsub,$event)"
																							>
																							<div v-if="pane.covernum ==1">
																								<p>已达封面图上传上限{{pane.covernum}}</p>
																							</div>
																							<div v-else>
																								<p class="ant-upload-drag-icon">
																								<a-icon :type="pane.imgloading ? 'loading' :'cloud-upload'" />
																								</p>
																								<p class="ant-upload-text">
																									将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																								</p>
																								<p class="ant-upload-hint">
																									建议最佳：宽高比1.52，456*300≤尺寸≤1368*900，支持JPG、PNG等图片格式
																								</p>
																							</div>
																						</a-upload-dragger>
																					</a-tab-pane>
																				</a-tabs>
																			</div>
																		</a-modal>
																	</div>
																	<!-- 大图竖图 -->
																	<div v-else-if="customactive ==6">
																		<div class="creative-video-card-wrapper">
																			<div class="video-card">
																				<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																					<div class="videomodel" v-if="pane.imageUrl" >
																						<div class="videobtn" style="top:95px;">
																							<a-button size="small" @click="oncover(indsub)" :loading="btnloading" type="primary">更换图片</a-button>
																						</div>
																						<img :src="pane.imageUrl" style="width:100%;height:250px" alt="">
																					</div>
																					<div v-else style="padding:12px;">
																						<a-upload
																						v-decorator="[
																						'upload',
																						
																						]"
																						name="avatar"
																						list-type="picture-card"
																						class="avatar-uploader"
																						:show-upload-list="false"
																						:data="{index:indsub,sub:customactive,uptype:2}"
																						:customRequest="customRequest"
																						@change="coverChange(indsub,$event)">

																						<img v-if="pane.imageUrl" :src="pane.imageUrl" alt="avatar" />
																						<div v-else>
																							<a-icon :type="pane.imgloading ? 'loading' : 'cloud-upload'" />
																							<div class="ant-upload-text">
																								<p style="font-size:12px;">（必填）</p>
																								<p>上传图片</p>
																							</div>
																						</div>
																						</a-upload>
																						<div class="card-create-button">
																							<a-button @click="oncover(indsub)" :loading="btnloading">素材库</a-button>
																						</div>
																					</div>
																						
																				</div>
																				<p class="card-create-mdp" :style="{width:item.content.width+'px'}">建议最佳：宽高比9:16,720*1280≤尺寸≤1440*2560,支持JPG、PNG等图片格式</p>
																			</div>
																		</div>

																		<!-- 封面图弹窗 -->
																		<a-modal
																			title=""
																			:visible="pane.covershow"
																			:confirm-loading="confirmLoading"
																			@ok="coverok(indsub)"
																			@cancel="handlecover(indsub)"
																			:width="900"
																			>
																			<div class="material">
																				<a-tabs default-active-key="1" @change="callback">
																					<a-tab-pane key="1" tab="图片素材">
																						<div style="margin-top:12px;height:430px;overflow:auto;">
																							<a-list :grid="{ gutter: 16, column: 4 }" :data-source="pane.coverlist">
																								<a-list-item slot="renderItem" @click="oncoveractive(indsub,item)" style="cursor:pointer;" :class="[pane.coveractive ==item ? 'coveractive' :'']"  slot-scope="item">
																									<img :src="item.url" :class="[pane.coveractive ==item ? 'imgactive' :'']" style="height:290px;" alt="">
																									<!-- <p> -->
																										<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																									
																										<div class="activetrues" v-if="pane.coveractive ==item">
																											<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																										</div>
																								</a-list-item>
																							</a-list>
																						</div>
																						<p>已选择 {{pane.covernum}}/1:</p>
																					</a-tab-pane>
																					<a-tab-pane key="2" tab="本地上传">
																						<a-upload-dragger
																								name="file"
																								:disabled="pane.covernum ==1"
																								:multiple="true"
																								:data="{index:indsub,sub:customactive,uptype:2}"
																								@change="coverChange(indsub,$event)"
																								:customRequest="modecustomRequest"
																							>
																							<div v-if="pane.covernum ==1">
																								<p>已达封面图上传上限{{pane.covernum}}</p>
																							</div>
																							<div v-else>
																								<p class="ant-upload-drag-icon">
																								<a-icon :type="pane.imgloading ?'loading' : 'cloud-upload'" />
																								</p>
																								<p class="ant-upload-text">
																									将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																								</p>
																								<p class="ant-upload-hint">
																									建议最佳：宽高比9:16,720*1280≤尺寸≤1440*2560,支持JPG、PNG等图片格式
																								</p>
																							</div>
																						</a-upload-dragger>
																					</a-tab-pane>
																				</a-tabs>
																			</div>
																		</a-modal>
																	</div>
																</div>
															</div>
														</a-form-item>

														<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
															<span slot="label">
																创意标题&nbsp;
															</span>
															<div class="form-row">
																<!-- <a-button @click="choosetitle">选标题</a-button> -->
																<a-input placeholder="请输入标题或使用系统推荐标题" v-decorator="[
																pane.input,
																{
																	rules: [],
																	initialValue: pane.nametitle
																}
																]"  @change="ontitle(indsub,$event)" maxLength="30" style="width:430px;" />
																<p class="dynamicp mfont">插入动态词包：
																	<a href="javascript:void(0);" @click="ondynamic('{地点}',indsub,4)">+地点</a><a href="javascript:void(0);" @click="ondynamic('{日期}',indsub,1727)">+日期</a><a href="javascript:void(0);" @click="ondynamic('{星期}',indsub,1736)">+星期</a><a href="javascript:void(0);" @click="ondynamic('{年龄}',indsub,1737)">+年龄</a> 
																	<span style="cursor:pointer;" @click="ondynamicmore(indsub)">更多</span>
																</p>
															</div>
														</a-form-item>

														<a-modal
															title=""
															:visible="pane.dynamicmore"
															:confirm-loading="confirmLoading"
															:width="800"
															:maskClosable="true"
															:footer="null"
															@cancel="onhandlecover(indsub)"
														>
															<a-table :scroll="{ x: 400, y: 300 }" :pagination="pages" :columns="dynamiclabel" :data-source="pane.dynamiclist">
																<!-- 动态词状态 -->
																<div slot="statusDemo" slot-scope="text">
																	<span v-if="text == 'CREATIVE_WORD_STATUS_APPROVE'">
																		审核通过
																	</span>
																	<span v-else-if="text =='CREATIVE_WORD_STATUS_REJECT'">
																		审核失败
																	</span>
																	<span v-else-if="text =='CREATIVE_WORD_STATUS_AUDIT'">
																		新建审核中
																	</span>
																	<span v-else-if="text == 'CREATIVE_WORD_STATUS_REAUDIT'">
																		修改审核中
																	</span>
																	
																</div>

																<div slot="action" slot-scope="text">
																	
																	<a href="javascript:void(0);" @click="ondynamic('{'+text.name+'}',indsub,text.creative_word_id)">插入</a>
																</div>

															</a-table>
														</a-modal>
														<div v-if="index == 0 || index ==1">
															<a-form-item :labelCol="{span: 3}" :wrapperCol="{span: 200}">
																<span slot="label">
																	同步状态&nbsp;
																</span>
																<div class="form-row">
																	<a-checkbox @change="onChange" v-decorator="[pane.derive_poster_cid]">
																		将该视频的封面和标题同步到图片创意
																	</a-checkbox>
																	<a-tooltip title="勾选后，在创建完视频创意后，在计划下同步新建图片创意">
																		<a-icon type="question-circle-o" />
																	</a-tooltip>
																</div>
															</a-form-item>
														</div>

														<!-- 创意预览 -->
														<div class="creative-preview-box">
															<div class="creative-preview">
																<div class="title">创意预览</div>
																<a-tabs default-active-key="1" :tabBarGutter="1" @change="callback">
																	<a-tab-pane key="1" tab="抖音" style="margin:0 !important;">
																		<div class="preview">
																			<img :src="imgurl('5.png')" style="width:100%;" alt="">
																			<div class="douyin-bk">
																				<img class="oneimg" :src="imgurl('headimg.jpg')" alt="">
																				<img class="twoimg" :src="imgurl('aweme_plus_icon.png')" alt="">
																			</div>
																			<div class="douyin-title">
																				{{item.content.addpanel[indsub].nametitle}}
																			</div>
																		</div>
																	</a-tab-pane>
																	<a-tab-pane key="2" tab="头条" style="margin:0 !important;">
																		<div class="preview">
																			<img :src="imgurl('15.png')" style="width:100%;" alt="">
																			<div class="container">
																				<div>
																					<img :src="imgurl('headimg.jpg')" alt="">
																				</div>
																				<div class="cibtauberbutton">
																					<a-space>
																						<a-button size="small">查看详情</a-button>
																						<a-button type="danger" size="small"><a-icon type="download" /> 立即下载</a-button>
																					</a-space>
																				</div>
																			</div>
																		</div>
																	</a-tab-pane>
																	<a-tab-pane key="3" tab="西瓜" style="margin:0 !important;">
																		<div class="preview">
																			<img :src="imgurl('15.png')" style="width:100%;" alt="">
																		</div>
																		<div class="container">
																			<div>
																				<img :src="imgurl('headimg.jpg')" alt="">
																			</div>
																			<div class="cibtauberbutton">
																				<a-space>
																					<a-button type="primary" style="width:160px;" size="small"><a-icon type="download" /> 立即下载</a-button>
																				</a-space>
																			</div>
																		</div>
																	</a-tab-pane>
																	<a-tab-pane key="4" tab="抖音火山版" style="margin:0 !important;">
																		<div class="preview">
																			<img :src="imgurl('3.png')" style="width:100%;" alt="">
																		</div>
																	</a-tab-pane>
																</a-tabs>
															</div>
														</div>
													</div>
											</a-tab-pane>
										</a-tabs>								
									</div>
								</div>
							</div>
						</div>
								
					</div>
				</div>

				<!-- 程序化创意 -->
				<div :class="[material =='STATIC_ASSEMBLE' ? 'isblock' :'isnone']">

						<a-form-item
					:label="$t('素材添加方式')"
					:labelCol="{span: 2}"
					:wrapperCol="{span: 200}"
					:required="true"
				>
					<a-radio-group v-decorator="[
						'is_presented_video',
						{ rules:[],initialValue: '0'}
					]"
						@change="onsource" button-style="solid">
						<a-radio-button value="0">
							自定义上传
						</a-radio-button>
						<a-radio-button value="1">
							选择程序化创意包
						</a-radio-button>
					</a-radio-group>
				</a-form-item>

				<div :class="[source =='0' ? 'isblock' :'isnone']">

					<a-form-item
						:label="$t('创意内容')"
						:labelCol="{span: 2}"
						:wrapperCol="{span: 200}"
						:required="true"
					>
						<div class="form-row">
							已选广告位：
							<span v-if="inventory =='smart_inventory'">优选广告位</span>
							<span v-else-if="inventory =='inventory_type'" v-for="item in mediaboxlist" :key="item.key">
								{{item.name}}
							</span>
							<span v-else-if="inventory =='scene_inventory'" v-for="item in cenelistbox" :key="item.key">
								场景广告位-{{item.name}}
							</span>
						</div>
					</a-form-item>
						<p class="mfont">
							图片创意个数：<span style="font-weight:700;margin-right:12px;">{{imagenums.length}}/12</span>&nbsp;&nbsp;  视频创意个数：<span style="font-weight:700">{{videonums.length}}/10</span>
						</p>
						
					<!-- 遍历创意内容 -->
					<div>
						<div class="btnmonbox mfont">
							<a-badge v-for="(item,index) in customlist" :key="index" :count="item.content.num">
							<div class="image-mode" @click="oncustoms(index+1)"  :class="progractive ==index+1 ? 'mode-active':''">
								<img :src="item.img" alt="">
									{{item.title}}
								<div class="bui-icon-question-triangle" v-if="progractive ==index+1"></div>
							</div>
							</a-badge>
						</div>

						<div v-for="(item,index) in customlist" :key="index">
							<div class="creative-common-entry" v-if="progractive ==index+1">
								<div class="creative-common-entry-1">
									<img :src="imgurl('creative_platform_entry.png')" alt="">
									<p class="creative-common-entry-1-tx-1">创意工作台</p>
									<p class="creative-common-entry-1-tx-2">您的创作</p>
									<p class="creative-common-entry-1-tx-2">制作小助手</p>
									<a href="">立即使用</a>
								</div>
								<div class="creative-common-entry-2">
									<img :src="imgurl('fast-generate-image.svg')" alt="">
									<p class="creative-common-entry-1-tx-2">一键生成大图</p>
								</div>
								<div class="creative-common-entry-2">
									<img :src="imgurl('fast-generate-video.svg')" alt="">
									<p class="creative-common-entry-1-tx-2">一键生成视频</p>
								</div>
							</div>
							<div class="ctt-panel-body-empty" v-if="progractive ==index+1 && item.content.panelshow ==true">
								<div class="creative-none-logo">
									<img :src="imgurl('none.png')" alt="">
								</div>

								<div v-if="index ==0 || index ==1">
									<p class="panel-box" v-if="videonums.length <10">
										请为
										<span v-if="progractive ==index+1">
											{{item.title}}
										</span>
										<a-button type="primary" @click="addparogr(index+1)"> <a-icon type="plus" />添加创意</a-button>
									</p>
									<p class="panel-box" v-if="videonums.length >=10">创意总数已达上限，无法再新增创意</p>
								</div>
								<div v-else>
									<p class="panel-box" v-if="imagenums.length <12">
										请为
										<span v-if="progractive ==index+1">
											{{item.title}}
										</span>
										<a-button type="primary" @click="addparogr(index+1)"> <a-icon type="plus" />添加创意</a-button>
									</p>
									<p class="panel-box" v-if="videonums.length >=12">创意总数已达上限，无法再新增创意</p>
								</div>
							</div>
							<!-- {{progractive}} {{item.content.show}} -->
							<div class="ctt-panel-box" v-if="progractive == index+1 && item.content.show ==true">
								<div class="ctt-panel-header">
									<div class="tab-list" style="width:950px;max-width:950px;">
										<div v-if="index ==0 || index ==1">
											<a-button type="primary" @click="addpush(index)" :disabled="tabvideo" style="margin-bottom:10px;"> <a-icon type="plus" />添加创意</a-button>
										</div>
										<div v-else>
											<a-button type="primary" @click="addpush(index)" :disabled="tabimage" style="margin-bottom:10px;"> <a-icon type="plus" />添加创意</a-button>
										</div>
										<div style="position:relative;max-height: 600px;overflow-y: auto;">

											<div class="form-row form-row-label" style="margin-top:10px;" v-for="(iv,nv) in item.content.addpanel" :key="nv">
												<div class="creative-video-card">
													<div class="creative-video-card-wrapper">
														<div v-if="index ==0 || index ==1">
															<div class="video-card cardbox" style="display:inline-block;">
																<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																	<div class="videomodel" v-if="iv.videoUrl" >
																		<div class="videobtn" >
																			<a-button size="small" @click="metavideo(nv)" :loading="btnloading" type="primary">更换视频</a-button>
																			<a :href="iv.videoUrl" target="_blank"><a-button size="small" @click="iv.videoUrl">视频播放</a-button></a>
																		</div>
																		<video
																		ref="refVideo"
																
																		playsinline="true"
																		type="video/mp4"
																		controls
																		muted
																		:style="index ==0? 'width:100%;height:250px;' : index ==1 ? 'width:100%;height:140px;': index ==2 ? 'width:100%;height:140px;' :index ==3 ? 'width:100%;height:140px;':index ==4 ? 'width:100%;height:250px;':''"
																		:src="iv.videoUrl" />
																	</div>
																	<div v-else style="padding:12px;">
																		<a-upload
																		name="avatar"
																		:show-upload-list="false"
																		:data="{index:nv,sub:progractive,uptype:1}"
																		:customRequest="paogrRequest"
																		@change="videoChanges(nv,$event)">
																		<div class="vediobox" :style="index ==0? 'width:114px;height:100px;' : index ==1 ? 'width:226px;height:68px;': index ==2 ? 'width:226px;height:68px;' :index ==3 ? 'width:206px;height:68px;':index ==4 ? 'width:114px;height:100px;':''">
																			<a-icon :type="iv.uploadloading ? 'loading' : 'cloud-upload'" />
																			<p class="upload-area-text" style="font-size:12px;">上传视频</p>
																			<p>(必填)</p>
																		</div>
																		</a-upload>
																		<div class="card-create-button" style="text-align:center;">
																			<a-button @click="metavideo(nv)" :loading="btnloading">素材库</a-button>
																		</div>
																	</div>
																</div>
															</div>

														<!-- 视频弹窗 -->
															<a-modal
																title=""
																:visible="iv.videoshow"
																:confirm-loading="confirmLoading"
																@ok="videooks(nv)"
																@cancel="handlevideos(nv)"
																:width="900"
																>
																<div class="material">
																	<a-tabs default-active-key="1" @change="callback">
																		<a-tab-pane key="1" tab="我的视频">
																			<a-form :form="forms">
																			<a-space>
																				<!-- 我的视频 -->
																				<a-input-search
																				style="width:200px;"
																				placeholder="可搜索视频名称或ID"
																				enter-button="搜索"
																				@search="sourceserach"
																				/>

																				<a-select name="source" style="width: 120px" placeholder="全部来源" @change="onallsource">
																					<a-select-option value="AD_SITE">
																						本地上传
																					</a-select-option>
																					<a-select-option value="CREATIVE_CENTER">
																						创意中心
																					</a-select-option>
																					<a-select-option value="OPEN_API">
																						开放平台
																					</a-select-option>
																					<a-select-option value="SUPPLIER">
																						即合视频
																					</a-select-option>
																					<a-select-option value="VIDEO_CAPTURE">
																						易拍视频
																					</a-select-option>
																					<a-select-option value="ACCOUNT_PUSH">
																						推送视频
																					</a-select-option>
																					<a-select-option value="STAR">
																						星图视频
																					</a-select-option>
																					<a-select-option value="CEWEBRITY_VIDEO">
																						达人视频
																					</a-select-option>
																					<a-select-option value="OTHERS">
																						其他来源
																					</a-select-option>
																				</a-select>
																				<a-select style="width: 120px" placeholder="全部标签" @change="onlabel">
																					
																				</a-select>
																			</a-space>
																			<div style="margin-top:12px;height:430px;overflow:auto;">
																				<a-list :grid="{ gutter: 16, column: 4 }" :data-source="iv.videolist">
																					<a-list-item slot="renderItem" @click="onvideoactives(nv,item)" style="cursor:pointer;" :class="[iv.videoactive ==item ? 'videoactive' :'']"  slot-scope="item">
																						<video
																						ref="refVideo"
																						width="200"
																						height="300"
																						playsinline="true"
																						type="video/mp4"
																						controls
																						muted
																						:src="item.url" />
																						<p>
																							<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																							<span class="videoname">{{item.filename}}</span> <a href="">编辑</a></p>
																							<div class="activetrue" v-if="iv.videoactive ==item.id">
																								<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																							</div>
																					</a-list-item>
																				</a-list>
																			</div>
																		<p>已选择 {{iv.videonum}}/1:</p>
																		</a-form>
																		</a-tab-pane>
																		<a-tab-pane key="2" tab="本地上传" force-render>
																				<a-upload-dragger
																					name="file"
																					:disabled="iv.videonum ==1"
																					:multiple="true"
																					:data="{index:nv,sub:progractive,uptype:1}"
																					@change="videoChanges(nv,$event)"
																					:customRequest="modepaogrRequest"
																				>
																				<div v-if="iv.videonum ==1">
																					<p>已达视频上传上限{{iv.videonum}}</p>
																				</div>
																				<div v-else>
																					<p class="ant-upload-drag-icon">
																					<a-icon :type="iv.uploadloading ? 'loading' : 'cloud-upload'" />
																					</p>
																					<p class="ant-upload-text">
																						将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																					</p>
																					<p class="ant-upload-hint">
																						宽高比9:16,视频码率≥516kbps,大小≤100M,分辨率≥720*1280,时长≥4s
																					</p>
																				</div>
																				</a-upload-dragger>
																			<p>已选择：{{iv.videonum}}/1</p>
																			
																		</a-tab-pane>
																		</a-tabs>
																</div>
															</a-modal>
														</div>

														<div v-else>

															<div class="video-card cardbox" style="display:inline-block;">
																<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																	<div class="videomodel" v-if="iv.imageUrl" >
																		<div class="videobtn" style="top:95px;">
																			<a-button size="small" @click="metaimage(nv)" :loading="btnloading" type="primary">更换图片</a-button>
																		</div>
																		<img :src="iv.imageUrl" 
																			:style="index ==0? 'width:100%;height:250px;' : index ==1 ? 'width:100%;height:140px;': index ==2 ? 'width:100%;height:140px;' :index ==3 ? 'width:100%;height:140px;':index ==4 ? 'width:100%;height:250px;':''"
																		alt="">
																	</div>
																	<div v-else style="padding:12px;">
																		<a-upload
																			:show-upload-list="false"
																			:data="{index:nv,sub:progractive,uptype:2}"
																			:customRequest="paogrRequest"
																			@change="coverChanges(nv,$event)">
																		<div class="vediobox" :style="index ==0? 'width:114px;height:100px;' : index ==1 ? 'width:226px;height:68px;': index ==2 ? 'width:226px;height:68px;' :index ==3 ? 'width:206px;height:68px;':index ==4 ? 'width:114px;height:100px;':''">
																			<a-icon :type="iv.imgloading ? 'loading' : 'cloud-upload'" />
																			<p class="upload-area-text" style="font-size:12px;">上传封面</p>
																			<p>(必填)</p>
																		</div>
																		</a-upload>
																		<div class="card-create-button" style="text-align:center;">
																			<a-button @click="metaimage(nv)" :loading="btnloading">生成/选择封面</a-button>
																		</div>
																	</div>
																</div>
															</div>

															<!-- 图片弹窗 -->
															<a-modal
																title=""
																:visible="iv.covershow"
																:confirm-loading="confirmLoading"
																@ok="coveroks(nv)"
																@cancel="handlecovers(nv)"
																:width="900"
																>
																<div class="material">
																	<a-tabs default-active-key="1" @change="callback">
																		<a-tab-pane key="1" tab="图片素材">
																			<div style="margin-top:12px;height:430px;overflow:auto;">
																				<a-list :grid="{ gutter: 16, column: 4 }" :data-source="iv.coverlist">
																					<a-list-item slot="renderItem" @click="oncoveractives(nv,item)" style="cursor:pointer;" :class="[iv.coveractive ==item ? 'coveractive' :'']"  slot-scope="item">
																						<img :src="item.url" :class="[iv.coveractive ==item ? 'imgactive' :'']" style="width:100%;" alt="">
																						<!-- <p> -->
																							<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																						
																							<div class="activetrues" v-if="iv.coveractive ==item">
																								<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																							</div>
																					</a-list-item>
																				</a-list>
																			</div>
																			<p>已选择 {{iv.covernum}}/1:</p>
																		</a-tab-pane>
																		<a-tab-pane key="2" tab="本地上传">
																			<a-upload-dragger
																					name="file"
																					:disabled="iv.covernum ==1"
																					:multiple="true"
																					:data="{index:nv,sub:progractive,uptype:2}"
																					@change="coverChanges(nv,$event)"
																					:customRequest="modepaogrRequest"
																				>
																				<div v-if="iv.covernum ==1">
																					<p>已达封面图上传上限{{iv.covernum}}</p>
																				</div>
																				<div v-else>
																					<p class="ant-upload-drag-icon">
																					<a-icon :type="iv.imgloading ? 'loading' : 'cloud-upload'" />
																					</p>
																					<p class="ant-upload-text">
																						将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																					</p>
																					<p class="ant-upload-hint">
																						建议最佳：宽高比9:16，720*1280≤尺寸≤1440*2560，支持JPG、PNG等图片格式
																					</p>
																				</div>
																			</a-upload-dragger>
																		</a-tab-pane>
																	</a-tabs>
																</div>
															</a-modal>
														</div>
															
													</div>
												</div>
												<div class="delectico" @click="removepush(iv.key,index)" v-if="item.content.addpanel.length > 0"><a-icon type="close" /></div>
											</div>
										</div>					
									</div>
								</div>
							</div>
						</div>

						<div style="margin-top:12px;">
								<a-form-item :required="true" :labelCol="{span: 2}" :wrapperCol="{span: 200}">
									<span slot="label">
										创意标题&nbsp;
									</span>
									<div class="form-row mfont">
										<a-space>
											<a-button type="primary" @click="onaddtitle" :disabled="addtitledis"><a-icon type="plus" /> 创意标题</a-button>
											<span>已选：{{this.input.length}}/10</span>
										</a-space>
									</div>

									<div class="form-row mfont" v-for="(i,n) in input" :key="n">
										<a-input placeholder="请输入标题或使用系统推荐标题" v-decorator="[
											i.value,
											{
												rules: [],
												initialValue: i.nametitle,
											}
											]" @change="ontitles(n,$event)" maxLength="30" style="width:430px;" /> <a-icon type="delete" @click="ondeltitle(n)" v-if="n > 0" style="cursor:pointer;margin-left:5px;" />
										<p class="dynamicp">插入动态词包：<a href="javascript:void(0);" @click="ondynamics('{地点}',n,4)">+地点</a><a href="javascript:void(0);" @click="ondynamics('{日期}',n,1727)">+日期</a><a href="javascript:void(0);" @click="ondynamics('{星期}',n,1736)">+星期</a><a href="javascript:void(0);" @click="ondynamics('{年龄}',n,1737)">+年龄</a> <span @click="ondynamicmores(n)" style="cursor:pointer;">更多</span></p>
										<a-modal
											title=""
											:visible="i.dynamicmores"
											:confirm-loading="confirmLoading"
											:width="800"
											:maskClosable="true"
											:footer="null"
											@cancel="handleCancels(n)"
										>
											<a-table :scroll="{ x: 400, y: 300 }" :pagination="pages" :columns="dynamiclabel" :data-source="i.dynamiclists">
												<!-- 动态词状态 -->
												<div slot="statusDemo" slot-scope="text">
													<span v-if="text == 'CREATIVE_WORD_STATUS_APPROVE'">
														审核通过
													</span>
													<span v-else-if="text =='CREATIVE_WORD_STATUS_REJECT'">
														审核失败
													</span>
													<span v-else-if="text =='CREATIVE_WORD_STATUS_AUDIT'">
														新建审核中
													</span>
													<span v-else-if="text == 'CREATIVE_WORD_STATUS_REAUDIT'">
														修改审核中
													</span>
												</div>

												<div slot="action" slot-scope="text">
													<a href="javascript:void(0);" @click="ondynamics('{'+text+'}',n,text.creative_word_id)">插入</a>
												</div>

											</a-table>
										</a-modal>
									</div>

								</a-form-item>
							</div>
					</div>
				</div>
				<div :class="[source =='1' ? 'isblock' :'isnone']">
					<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
						<span slot="label">
							选择素材&nbsp;
							<!-- <a-tooltip title="What do you want others to call you?">
							<a-icon type="question-circle-o" />
							</a-tooltip> -->
						</span>
						<div class="form-row">
							<a-button type="primary" @click="choiceorign">选择</a-button>
						</div>
					</a-form-item>


					 <a-modal
						title="选择程序化创意包"
						:visible="choiceorignbox"
						:confirm-loading="confirmLoading"
						:width="600"
					>
						<div style="margin-bottom:12px;">
							<a-input-search
								placeholder="请输入"
								enter-button="搜索"
								size="small"
								@search="onchoice"
							/>
						</div>
						 <a-table :row-selection="rowchoicelist" bordered style="width:550px;" selections="true" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="choicelabel" :data-source="choicelist">
						</a-table>
    				</a-modal>

					<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
						<span slot="label">
							创意组件&nbsp;
							<a-tooltip title="What do you want others to call you?">
							<a-icon type="question-circle-o" />
							</a-tooltip>
						</span>
						<div class="form-row">
							<a-button disabled>选择</a-button>
						</div>
					</a-form-item>
				</div>
				</div>

				<!-- <a-form-item
				style="margin-top:20px;"
					:labelCol="{span: 2}"
					:wrapperCol="{span: 200}"
					:required="true"
				>
				<span slot="label">
										推广卡片&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>
						<div class="product-panel mfont">
							<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										卡片主图&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>
									<div class="form-row">
										<div class="creative-video-card">
											<div class="creative-video-card-wrapper">
												<div class="video-card">
													<div class="card-create-md" style="width:140px; height:140px;">
														<div class="videomodel" v-if="cardboximg !=''">
															<div class="videobtn" style="top:50px;">
																<a-button size="small" @click="oncardimg" type="primary">更换图片</a-button>
															</div>
															<img :src="cardboximg" style="width:100%;height:140px" alt="">

														</div>
														<div v-else style="padding:12px;">
															<a-upload
															name="avatar"
															:show-upload-list="false"
															:customRequest="onuploadcardimg"
															@change="handleChange">
																<div class="card-create-upload" style="width:116px;height:73px;margin-bottom:10px;">
																	<p class="upload-area-text"><a-icon type="cloud-upload" /> 上传图片</p><br />
																	<p>(必填)</p>
																</div>
															</a-upload>
															<div class="card-create-button">
																<a-button @click="oncardimg">素材库</a-button>
															</div>
														</div>
													</div>
													<p class="card-create-mdp" style="width:200px;">建议尺寸为108*108，大小小于1M。支持JPG、PNG等图片格式</p>
												</div>
											</div>
										</div>
									</div>
								</a-form-item>

								 <a-modal
									title=""
									:visible="cardbox"
									:confirm-loading="confirmLoading"
									@ok="cardOk"
									@cancel="cardCancel"
									:width="800"
									>
									<a-tabs default-active-key="1" @change="callback">
										<a-tab-pane key="1" tab="我的图片">
											<a-radio-group v-model="value" @change="onChange">
												<a-radio :style="radioStyle" :value="1">
													卡片主图
												</a-radio>
											 </a-radio-group>
											<div style="text-align:center;">
												<a-empty />
											</div>
											<p>已选择：0/1：</p>
										</a-tab-pane>
										<a-tab-pane key="2" tab="本地上传">
												<a-upload-dragger
													name="file"
													:multiple="true"
													:show-upload-list="false"		
													:customRequest="onuploadcardimg"
												>
													<p class="ant-upload-drag-icon">
													<a-icon type="cloud-upload" />
													</p>
													<p class="ant-upload-text">
														将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
													</p>
													<p class="ant-upload-hint">
														建议最佳：宽高比1:1，108*108≤尺寸≤108*108，支持JPG、PNG等图片格式
													</p>
												</a-upload-dragger>
												<p>已选择：0/10</p>
										</a-tab-pane>
									</a-tabs>

								</a-modal>


								<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										卡片标题&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>
									<div class="form-row mfont">
										<a-input placeholder="请输入卡片标题" v-decorator="[
											'product_description',
										{ rules:[{required: true, message: '请输入卡片标题，卡片标题1-7个字' }],initialValue: cardtitle}
										]" maxLength="7" style="width:430px;" />
										<p>推荐名称：<a href="javascript:void(0);" @click="oncardtitle('海量精彩内容')">+海量精彩内容</a></p>
									</div>
								</a-form-item>

								<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										推广卖点&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>
									<div class="form-row mfont">
										<a-space>
											<a-button type="primary" @click="onpoint" :disabled="btnpoint"><a-icon type="plus" /> 推广卖点</a-button>
											<span>已选：{{inputlist.length}}/10</span>
										</a-space>
										<p>当您选择多个卖点时，系统将默认为您开启针对推广卖点的优选投放</p>

										<div v-for="(item, index) in inputlist" :key="index" :value="item">
											<a-input placeholder="添加推广卖点或使用系统推荐卖点" v-decorator="[item.valuename, {  rules: [{ required: true, message: '请输入推广卖点，推广卖点6-9个字' }]}]" maxlength="9" @change="onpoints(index,$event)" style="width:430px;" /><a-icon :class="[index >= 1 ?'isblocks' :'isnone']" @click="ondelinput(index)" style="margin-left:10px;" type="delete" />
										</div>

									</div>
								</a-form-item>

									 <a-modal
									title=""
									:visible="systemshow"
									:confirm-loading="confirmLoading"
									@ok="systemok"
									@cancel="systemCancel"
									:width="600"
									>
										<a-table :row-selection="rowsystempoint" bordered style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="systemlabel" :data-source="systemlist">
										</a-table>
									 </a-modal>
									

								<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										行动号召&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>
									<div class="form-row mfont">
										<a-radio-group v-decorator="[
										'enable_personal_action',
										{ rules:[],initialValue: 'true'}
										]"
										@change="onactiontext" button-style="solid">
											<a-radio-button value="true">
												开启智能优选
											</a-radio-button>
											<a-radio-button value="false">
												关闭智能优选
											</a-radio-button>
											
										</a-radio-group>
									<p :class="[actiontext =='0' ?'isblock':'isnone']">系统将基于字节领先的技术能力和实时的投放数据，在每次抖音广告显示时，挑选最有利于转化的文案进行显示，帮助您提升转化能力。</p>
										<a-select
											show-search
											placeholder="请选择"
											option-filter-prop="children"
											style="width: 450px;display:block;"
											v-decorator="[
												'call_to_action',
											]"
										>
											<a-select-option v-for="item in calllist" :key="item">
												{{ item }}
											</a-select-option>
										</a-select>
										<p :class="[actiontext =='true' ?'isblock':'isnone']">在无法使用智能优选的流量场景下，将使用上方文案展示给用户。</p>
										<p :class="[actiontext =='false' ?'isblock':'isnone']">关闭智能优选后，将对所有用户展示您选择的文案。</p>
									</div>
								</a-form-item>

						</div>

				</a-form-item> -->

				<a-form-item
					:labelCol="{span: 2}"
					:wrapperCol="{span: 200}"
					:required="true"
				>
					<span slot="label">
						来源&nbsp;
						<a-tooltip title="What do you want others to call you?">
						<a-icon type="question-circle-o" />
						</a-tooltip>
					</span>
					<div class="form-row">
						<a-input placeholder="请输入来源" v-decorator="['source', { rules: [] ,initialValue:sources}]" style="width:450px;" maxLength="10" />
					</div>
				</a-form-item>

				<a-form-item
					:label="$t('品牌主页')"
					:labelCol="{span: 2}"
					:wrapperCol="{span: 200}"
					:required="true"
				>
					<a-radio-group v-decorator="[
						'ies_core_user_id',
						{ rules:[],initialValue: '0'}
					]"
						@change="onbrandhone" button-style="solid">
						<a-radio-button value="0" disabled>
							不开启
						</a-radio-button>
						<a-radio-button value="1" disabled>
							开启抖音主主页
						</a-radio-button>
						<span style="margin-left:12px;"><a href="">绑定抖音号，持续助力跑量</a></span>

						<div :class="[brandhome ==1?'isblock':'isnone']">
							<p>广告视频将同步到您的主页下，在客户端点击广告头像将进入您的主页</p>
							<a-checkbox v-decorator="['is_feed_and_fav_see',{rules:[]}]">
								主页作品列表隐藏广告内容
							</a-checkbox>
						</div>
					</a-radio-group>
				</a-form-item>

				<a-form-item
					:label="$t('广告头像')"
					:labelCol="{span: 2}"
					:wrapperCol="{span: 200}"
					:required="true"
				>
					<div class="form-row mfont">
						<div class="avatar-info">
							<div class="imgbox">
								<img :src="avaterimg" alt="">
							</div>
							<div class="avatarfont">
								<p>此头像作为头条、抖音火山版、西瓜和抖音的广告头像展示</p>
								<p class="ad-color-text-hint">取自推广应用的图标</p>
							</div>
							<div class="clear"></div>
						</div>
					</div>
				</a-form-item>

				<div v-if="material == 'NONE'">
					<a-form-item
						:label="$t('客户端下载视频')"
						:labelCol="{span: 3}"
						:wrapperCol="{span: 200}"
						:required="true"
					>
						<a-radio-group v-decorator="[
							'is_presented_video',
							{ rules:[],initialValue: '0'}
						]"
							@change="oncomment" button-style="solid">
							<a-radio-button value="0" disabled>
								不启用
							</a-radio-button>
							<a-radio-button value="1" disabled>
								启用
							</a-radio-button>
						</a-radio-group>
					</a-form-item>

					<a-form-item
						:label="$t('最优创意衍生计划')"
						:labelCol="{span: 3}"
						:wrapperCol="{span: 200}"
					>
						<a-radio-group v-decorator="[
							'generate_derived_ad',
							{ rules:[],initialValue: '0'}
						]"
							@change="oncomment" button-style="solid">
							<a-radio-button value="0">
								不启用
							</a-radio-button>
							<a-radio-button value="1">
								启用
							</a-radio-button>
						</a-radio-group>
					</a-form-item>
				</div>

				<a-form-item
					:label="$t('广告评论')"
					:labelCol="{span: 2}"
					:wrapperCol="{span: 200}"
					:required="true"
				>
					<a-radio-group v-decorator="[
						'is_comment_disable',
						{ rules:[],initialValue: '0'}
					]"
						@change="oncomment" button-style="solid">
						<a-radio-button value="1">
							关闭
						</a-radio-button>
						<a-radio-button value="0">
							开启
						</a-radio-button>
						<p :class="[comments == '1'? 'isblock' :'isnone']"><a-icon type="exclamation-circle" />抖音暂时不支持关闭广告评论功能</p>
					</a-radio-group>
				</a-form-item>
				<a-collapse accordion style="background:#fff;border:none;padding:0;">
					<a-collapse-panel key="1" header="显示高级选项" style="border:none;color:Red;">
						<a-form-item
						:label="$t('创意展现')"
						:labelCol="{span: 2}"
						:wrapperCol="{span: 200}"
						:required="true"
					>
						<a-radio-group v-decorator="[
							'creative_display_mode',
							{ rules:[],initialValue: 'CREATIVE_DISPLAY_MODE_RANDOM'}
						]"
							@change="ontoshow" button-style="solid">
							<a-radio-button value="CREATIVE_DISPLAY_MODE_CTR">
								优选模式
							</a-radio-button>
							<a-radio-button value="CREATIVE_DISPLAY_MODE_RANDOM">
								轮播模式
							</a-radio-button>
							<p :class="[toshow =='CREATIVE_DISPLAY_MODE_CTR'?'isblock':'isnone']">选择优选模式，系统会自动对效果好的创意进行展示量倾斜，创意效果越好展示量越高</p>
							<p :class="[toshow =='CREATIVE_DISPLAY_MODE_RANDOM'?'isblock':'isnone']">使用创意轮播，系统将平分各创意展现机会，便于广告主比较各创意投放效果</p>
						</a-radio-group>
					</a-form-item>
					</a-collapse-panel>
				</a-collapse>
			</div>
		</div>
		
		<div class="code-box-demos" id="origin-type">
			<div class="ad-row-title">
				创意分类
			</div>
			<div class="ad-group">
				<a-form-item
					:label="$t('创意分类')"
					:labelCol="{span: 2}"
					:wrapperCol="{span: 200}"
					:required="true"
				>
				<a-cascader style="width:450px;"  v-decorator="[
          'third_industry_id',
          {
            rules: [
              { type: 'array', required: true, message: '请选择创意分类'},
            ],
			initialValue:cascaders
          },
        ]" :field-names="{ label: 'name', value: 'id', children: 'children' }" :options="typelist" placeholder="请选择" @change="onChange" />
		 		<!-- <a-cascader style="width:450px;" :default-value="cascaders" :field-names="{ label: 'name', value: 'id', children: 'items' }" :options="typelist" placeholder="请选择" @change="onChange" /> -->
				</a-form-item>

				<a-form-item
						:label="$t('创意标签')"
						:labelCol="{span: 2}"
						:wrapperCol="{span: 200}"
						:required="true"
					>
					 <a-input-search
						placeholder="最多20个标签，每个不超过10个字"
						enter-button="添加（回车键）"
						style="width:450px;"
						@search="onlabel"
						@keyup.enter="handleAddlabel"
						/>
				</a-form-item>
				
				<div class="mfont" style="width:400px;height:300px;overflow-y:auto" :class="[labellist.length >0 ?'isblock':'isnone']">
					<a-list :grid="{ gutter: 16, column: 2 }" :split="true" :pagination="false" size="small" :data-source="labellist">
						<a-list-item slot="renderItem" slot-scope="item">
							<p style="border:1px solid #ccc;padding:5px;">{{item}} <span @click="dellabel(item)" style="float:right;cursor:pointer;"><a-icon type="close" /></span></p>
						</a-list-item>
					</a-list>
				</div>

			</div>
		</div>

		<div class="code-box-demos" id="origin-link">
			<div class="ad-row-title">
				监测链接<span style="font-size:12px;margin-left:12px;color: #333;">自2020年11月17日起，新创建的广告计划“点击监测链接”将升级为“有效触点监测链接”</span>
			</div>
			<div class="ad-group">
				<a-form-item
						:label="$t('展示')"
						:labelCol="{span: 2}"
						:wrapperCol="{span: 200}"
					>
					 <a-input style="width:450px;"  v-decorator="['track_url']" placeholder="请输入链接地址" />
				</a-form-item>

				<a-form-item
						:labelCol="{span: 2}"
						:wrapperCol="{span: 200}"
					>
					<span slot="label">
						有效触点&nbsp;
						<a-tooltip title="What do you want others to call you?">
						<a-icon type="question-circle-o" />
						</a-tooltip>
					</span>
					 <a-input style="width:450px;" v-decorator="['action_track_url']" placeholder="请输入链接地址" />
				</a-form-item>

				<a-form-item
						:label="$t('视频播放')"
						:labelCol="{span: 2}"
						:wrapperCol="{span: 200}"
					>
					 <a-input style="width:450px;" v-decorator="['video_play_effective_track_url']" placeholder="请输入链接地址" />
				</a-form-item>

				<a-form-item
					:label="$t('视频播完')"
					:labelCol="{span: 2}"
					:wrapperCol="{span: 200}"
				>
					 <a-input style="width:450px;" v-decorator="['video_play_done_track_url']" placeholder="请输入链接地址" />
				</a-form-item>

				<a-form-item
					:label="$t('视频有效播放')"
					:labelCol="{span: 2}"
					:wrapperCol="{span: 200}"
				>
					 <a-input style="width:450px;" v-decorator="['video_play_track_url']" placeholder="请输入链接地址" />
				</a-form-item>
			</div>
		</div>
		<a-divider />
		<div class="code-box-demo">
			<div class="ad-group ad-font-size">
				当前广告账户：
				<strong>{{user.name}}（{{advertiser_id}}）</strong>
			</div>
		</div>
		<a-divider />
		<div class="code-box-demo" style="text-align:right;">
			<a-space>
			<a-button size="large" @click="cancel">
				取消
			</a-button>
			<a-button size="large" :loading="logging" @click="savebtn()" type="primary">
				保存并关闭
			</a-button>
			</a-space>
		</div>

      </a-form>
	   </a-col>
  </a-row>
	</div>
  </div>
</template>
<script src="./edit.js">

</script>
<style lang="less" scoped>
.example {
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-bottom: 20px;
    /* padding: 30px 50px; */
    margin: 20px 0;
  }

// 视频
.videomodel{
	position: relative;
}

.cardprogra{
	display: inline-block;
	margin-left: 10px;
}

.vediobox{
	text-align:center;padding:10px;
	background-color: #F8F8F8;
	border: 1px dashed #D6D6D6;
	cursor: pointer;
	margin-bottom: 16px;
}

.delectico{
	position:absolute;
	right: -7px;
	top:-10px;
	z-index: 1;
	cursor: pointer;
}

.cardbox{
	margin-right: 16px;
}

.ant-upload.ant-upload-select-picture-card{
	width:auto !important;
	height: auto !important;
}

.videomodel .videobtn{
	position: absolute;
	z-index: 1;
	left: 30px;
	top:50px;
}

.ctt-panel-box .ctt-panel-header .tab-list[data-v-1c2c1da8]{
	max-width: 900px;
    display: inline-block;
    overflow-x: auto;
    overflow-y: hidden;
}

.videoactive{
	position: relative;
	border:1px solid #2F88FF;
	// background: #2F88FF;
}

.videoactive .ant-list-item{
	height: 330px !important;
}

.videoactive video{
	height: 290px;
}

.coveractive{
	position: relative;
	// border:1px solid #2F88FF;
}

.coveractive .ant-list-item{
	height: 300px !important;
	margin-bottom: 0;
}


.imgactive{
	border:2px solid #2F88FF;
}
.videoactive image{
	// width: 180px;
	height: 300px;
}

.activetrues{
	position: absolute;
	z-index: 3;
	top:10px;
	right: 50px;
	background: #2F88FF;
}


.activetrue{
	position: absolute;
	z-index: 3;
	top:10px;
	right: 30px;
	background: #2F88FF;
}

.videoname{
	width: 140px;
	overflow : hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.desc-wrapper{
    position: absolute;
    right: 24px;
    top: 0px;
    height: 364px;
    width: 324px;
    font-family: PingFangSC;
    font-size: 14px;
    line-height: 16px;
    border: 1px solid #EBEBEB;
    border-radius: 4px;
    padding: 12px;
    background: #fff;
    z-index: 1;
}

//多个图片类型
.btnmonbox .image-mode{
	display: inline-block;
	box-sizing: border-box;
	display: inline-flex;
    position: relative;
    background: #FFF;
    box-shadow: 0px 2px 4px 0px #eff1fa;
    border-radius: 4px;
    border: 1px solid #DEE4F5;
    padding: 16px;
    margin-left: 8px;
	cursor: pointer;
	line-height: 60px;
}

.ctt-panel-box{
	margin-left: 12px;
	width: 950px;
	display: inline-block;
	border-radius: 4px;
    border: 1px solid #dadfe3;
	min-height: 293px;
	margin-top: 12px;
}

.creative-video-card{
	padding: 16px 24px;
    color: #666;
}

.creative-video-card .creative-video-card-wrapper{
	margin-right: 24px;
	display: inline-block;
}

.creative-video-card-wrapper .video-card .card-create-md{
	position: relative;
    // width: 140px;
    // height: 250px;
    border: 1px solid #DADFE3;
    background-color: #FFF;
    // padding: 12px;
    border-radius: 4px;
    overflow: hidden;
}

.card-create-md .card-create-upload{
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    // width: 115px;
    // height: 100%;
    border-radius: 4px;
    background-color: #F8F8F8;
    border: 1px dashed #D6D6D6;
	cursor: pointer;
	// height: 116px;
	margin-bottom: 16px;
	text-align: center;
}

.video-card .card-create-mdp{
	// width: 140px;
	font-size: 12px;
    color: #999;
	word-break: break-all;
	line-height: 20px;
}

.card-create-md .card-create-button button{
	width: 114px;
	margin-bottom: 12px;
}

.card-create-md .card-create-upload p{ 
	height: 22px;
    line-height: 22px;
    font-size: 14px;
	color: #666;
}


//右边创意预览
.creative-preview-box{
	width: 256px;
    height: 500px;
    background: #F8F9FA;
	border-radius: 4px;
	position: absolute;
	right: 0;
	top:0;
}

.creative-preview-box .creative-preview{
	padding: 24px;
    height: 442px;
}

.creative-preview-box .creative-preview .title{
	color: #333333;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
}

.preview{
	position: relative;
}

.douyin-bk .oneimg{
	width: 100%;
	position: absolute;
	width: 30px;
    height: 30px;
    line-height: 48px;
    font-size: 24px;
    left: 177px;
    z-index: 3;
    top: 130px;
    border-radius: 50%;
}

.douyin-bk .twoimg{
	position: absolute;
	top: 150px;
    right: 0;
    z-index: 10;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #f42c55;
}

.douyin-title{
	position: absolute;
	z-index: 4;
    color: #fff;
    font-size: 15px;
    line-height: 21px;
	top: 270px;
	font-size: 12px;
    left: 10px;
    width: 300px;
}

.dynamicp a{
	margin-left:10px;
}

.dynamicp span{
	margin-left: 20px;
	color:#13c2c2;
}


.container{
    position: absolute;
    bottom: 30px;
    width: 320px;
    left: 16px;
    z-index: 3;
}

.container div img{
	width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px #fff solid;
    display: inline-block;
    background-color: #d6d6d6;
}

.container .cibtauberbutton{
	margin-top: 12px;
}

.container div button{
	height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
    display: inline-block;
    border-radius: 4px;
}


.form-row-label{
	background: #f9f9f9;
    border: 1px solid #DADFE3;
    padding-top: 24px;
    padding-bottom: 24px;
    position: relative;
    display: inline-block;
    margin: 0 12px 24px;
    text-align: center;
    vertical-align: top;
}

// 推广卡片
.product-panel{
    width: 950px;
    min-height: 500px;
    border-radius: 4px;
    border: 1px solid #dadfe3;
    background-color: #ffffff;
    color: #333333;
    padding: 24px 0px;
}

.avatar-info{
	height: 64px;
    width: 95%;
    background: #F8F9FA;
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
}

.avatar-info div{
	float:left;
	margin-left: 12px;
}

.avatar-info div img{
	width: 48px;
	height: 48px;
}

.avatar-info div p {
	line-height: 30px;
	margin: 0;
	font-size: 12px;
}

.avatar-info div .ad-color-text-hint{
	color: #999;
}

.clear{
	clear: both;
}
// .douyin-bk img{

// }
.ant-tabs-tab{
	margin:0 !important;
}

.ctt-panel-box .ctt-panel-header{
	border-bottom: 1px solid #dadfe3;
    padding: 12px 14px 0px 14px;
    overflow: hidden;
}

.ctt-panel-box .ctt-panel-header .tab-list{
	max-width: 780px;
	// float: left;
	display: inline-block;
    overflow-x: auto;
    overflow-y: hidden;
}

.ctt-panel-box .ctt-panel-header .tab-list .tab-list-inner{
	font-size: 14px;
    float: left;
    position: relative;
    padding: 7px 8px;
    margin: 0 9px 7px 10px;
    border-radius: 2px;
	cursor: pointer;
	border-right: 1px solid #ccc;
}

.ctt-panel-box .ctt-panel-body{
	min-height: 100px;
    padding: 24px 24px 24px 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    border-radius: 4px;
}

.ctt-panel-box .ctt-panel-header .tab-list .active{
	color: #2F88FF;
	font-weight: bold;
	
}

//添加创意大盒子
.creative-common-entry{
	float:left;
	width: 88px;
	cursor: pointer;
    height: 165px;
    border-radius: 4px;
	border: 1px solid #dadfe3;
	text-align: center;
	margin-top:12px;
}

//选中的图片类型
.btnmonbox .mode-active{
	border-color: #2F88FF;
	display: inline-flex;
    position: relative;
    background: #FFF;
    box-shadow: 0px 2px 4px 0px #eff1fa;
    border-radius: 4px;
    padding: 16px;
    margin-left: 8px;
    cursor: pointer;
}

 .btnmonbox .mode-active .bui-icon-question-triangle{
	content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    bottom: -5px;
    right: 20px;
    background-color: #fff;
    border: 1px solid #2F88FF;
    border-top-width: 0;
    border-left-width: 0;
    transform: rotate(45deg);
    box-shadow: 0px 2px 4px 0px #eff1fa;
 }

.ctt-panel-body-empty .panel-box{
	font-size: 14px; height: 36px; line-height: 36px;
	text-align: center;
}

.creative-common-entry .creative-common-entry-1 img{
	width: 84px;
}

.ctt-panel-body-empty{
	display: inline-block;
	width: 950px;
    border-radius: 4px;
    border: 1px solid #dadfe3;
	min-height: 293px;
	margin-left: 12px;
	margin-top: 12px;
}

.ctt-panel-body-empty .creative-none-logo{
	width: 390px;
    height: 136px;
	margin: 0 auto;
	text-align: center;
}

.ctt-panel-body-empty .creative-none-logo img{
	width: 240px;
    height: 136px;
}

.creative-common-entry-2{
    height: 56px;
    border: 1px solid #dadfe3;
    border-radius: 4px;
	cursor: pointer;
	margin-top: 8px;
}

.creative-common-entry-2 img{
    height: 20px;
    margin-top: 8px;
}

.creative-common-entry-2 p{
	color: #999;
	font-size: 12px;
	text-align: center;
}

.creative-common-entry .creative-common-entry-1 .creative-common-entry-1-tx-2{
	font-weight: 400;
    line-height: 18px;
    text-align: center;
    margin: 0 12px;
	color: #999;
	font-size: 12px;
}


.creative-common-entry-1-tx-1 img{
    font-weight: 700 !;
    margin-top: 3px;
    margin-bottom: 4px;
    text-align: center;
	line-height: 17px;
	border: 1px solid #dadfe3;
}

.creative-common-entry .creative-common-entry-1 a{
	display: inline-block;
    line-height: 17px;
    margin: 8px 4px 12px 15px;
}

.ctt-panel-body-empty{
	padding: 44px 0 43px 0;
	box-sizing: border-box;
}

.btnmonbox div img{
	margin-right:10px;
}

.ad-row-title{
	font-size: 22px;
}

.isblock{
  display: block;
}

.isblocks{
  display: inline-block;
}

.isnone{
  display: none;
}

.ad-group{
	padding-left: 20px;
	margin-top: 32px;
	font-size: 14px;
	line-height: 20px;
}

.code-box-demos{
	padding-top:20px;
}

.ant-form-item-control-wrapper{
	display: inline-block !important;
}
.mfont{
  margin-left: 100px;
}
.spanfont{
  color:#2F88FF;
}
</style>
